import {defineComponent, h, PropType, resolveComponent} from 'vue';
import {getAllMapperData} from '@/components/layout/index.ts';

export default defineComponent({
  name: 'FxNavigate',
  inheritAttrs: false,
  props: {
    class: {
      type: String
    },
    data: {
      type: Object,
      default: () => {
        return {};
      }
    },
    path: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: '16'
    },
    showIcon: {
      type: Boolean,
      default: true
    },
    iconField: {
      type: String as PropType<string>,
      default: 'icon'
    },
    nameField: {
      type: String as PropType<string>,
      default: 'name'
    },
  },
  emits: [],
  setup: function (props, context) {

    const renderItems = () => {
      const children = [];
      const list = getAllMapperData(props.data, props.path);
      if (list && list.length > 0) {
        for (let i = 0; i < list.length; i++) {
          const item = list[i];
          if (item) {
            children.push(h(resolveComponent('NBreadcrumbItem'), {}, {
              default: () => renderItem(item)
            }));
          }
        }
      }
      return children;
    };
    const renderItem = (item) => {
      const children = [];
      const name = item[props.nameField];
      if (props.showIcon) {
        const icon = item[props.iconField];
        if (icon) {
          children.push(h(resolveComponent('FxIcon'), {
            class: 'fx-navigate__icon',
            style: 'margin-right: 4px',
            size: props.size,
            name: icon,
            key: icon
          }));
        }
      }
      children.push(name);
      return children;
    };
    return () => {
      return h(resolveComponent('NBreadcrumb'), {
        class: ['fx-navigate', props.class],
        ...context.attrs
      }, {
        default: () => renderItems()
      });
    };
  }
});